<template>
	<view class="goshop-evaluate-container">
		<u-toast ref="uToast"></u-toast>
		<view class="goshop-evaluate-wrap">
			<view class="goshop-evaluate-head">
				<view class="goshop-evaluate-head-left">
					<image class="goshop-img-48" :src="orderData.goodInfo.thumbnail"></image>
				</view>
				<view class="goshop-evaluate-head-right u-m-l-10">
					<view>{{orderData.goodInfo.name}}</view>
					<view class="price-color u-m-t-10">{{moneyText}}{{orderData.goodInfo.price}}</view>
				</view>
			</view>
			<view class="goshop-evaluate-body">
				<view>
					<u--textarea confirmType="done" height="130" v-model="form.content" :placeholder="filldescText" count maxlength="90"></u--textarea>
				</view>
				<view class="u-m-t-10">
						<u-upload
							:fileList="fileList"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							:maxCount="3"
						></u-upload>
				</view>
			</view>
			<view class="goshop-evaluate-footer" v-if="locale === 'zh-Hans'">
					<view class="evaluate-radio" @tap="form.rating = 1">
						<view class="iconfont iconfont-radio-yes" v-if="form.rating === 1"></view>
						<view class="iconfont iconfont-radio-no" v-else></view>
						<view class="iconfont iconfont-praise" style="width: 57px;height: 24px;margin-left: 10rpx;"></view>
					</view>
					<view class="evaluate-radio" @tap="form.rating = 2">
						<view class="iconfont iconfont-radio-yes" v-if="form.rating === 2"></view>
						<view class="iconfont iconfont-radio-no" v-else></view>
						<view class="iconfont iconfont-average" style="width: 57px;height: 24px;margin-left: 10rpx;"></view>
					</view>
					<view class="evaluate-radio" @tap="form.rating = 3">
						<view class="iconfont iconfont-radio-yes" v-if="form.rating === 3"></view>
						<view class="iconfont iconfont-radio-no" v-else></view>
						<view class="iconfont iconfont-badreview" style="width: 57px;height: 24px;margin-left: 10rpx;"></view>
					</view>
			</view>
			<view v-else class="goshop-evaluate-footer">
				<view class="evaluate-radio" @tap="form.rating = 1">
					<view class="iconfont iconfont-radio-yes" v-if="form.rating === 1"></view>
					<view class="iconfont iconfont-radio-no" v-else></view>
					<view class="iconfont iconfont-praise-en" style="width: 57px;height: 24px;margin-left: 10rpx;"></view>
				</view>
				<view class="evaluate-radio" @tap="form.rating = 2">
					<view class="iconfont iconfont-radio-yes" v-if="form.rating === 2"></view>
					<view class="iconfont iconfont-radio-no" v-else></view>
					<view class="iconfont iconfont-average-en" style="width: 57px;height: 24px;margin-left: 10rpx;"></view>
				</view>
				<view class="evaluate-radio" @tap="form.rating = 3">
					<view class="iconfont iconfont-radio-yes" v-if="form.rating === 3"></view>
					<view class="iconfont iconfont-radio-no" v-else></view>
					<view class="iconfont iconfont-badreview-en" style="width: 57px;height: 24px;margin-left: 10rpx;"></view>
				</view>
			</view>
			<view class="goshop-evaluate-submit">
				<u-button :text="confirmText" type="error" @click="submit()"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config';
	import {orderInfo,evaluateCreate} from '@/common/http.api.js'
	export default {
		data() {
			return {
				fileList: [],
				form:{
					orderId:'',
					orderGoodId:'',
					rating:1,
					content:'',
					images:[]
				},
				orderData:{
					goodInfo:{
						thumbnail:'',
					}
				},
				moneyText:'',
				filldescText:'',
				confirmText:'',
				locale:'',
				uploadloadingText:'',
				successText:'',
			};
		},
		onLoad(e){
		  this.form.orderId = e.orderId;
		  this.form.orderGoodId = e.orderGoodId;
		  this.getOrderInfo();
		  this.locale = this.$i18n.locale;
		},
		onShow(){
		  this.refresh();	
		},
		methods:{
			submit(){
				let that = this;
				evaluateCreate(this.form).then(res => {
					if (res.code === 0) {
						this.$refs.uToast.show({
							message: that.successText,
							type: 'success',
							complete() {
								uni.redirectTo({
									url: 'pages/common/order/bought'
								})
							}
						})
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
						})
					}
				});
			},
			refresh(){
			  this.moneyText = this.$t('common.money.text');
			  this.filldescText = this.$t('evaluate.filldesc.text');	
			  this.confirmText = this.$t('evaluate.confirm.text');
			  this.uploadloadingText = this.$t('common.uploadloading.text');
			  this.successText = this.$t('releasegood.success.text');
			},
			getOrderInfo(){
				orderInfo({params:{id:this.form.orderId}}).then(res => {
					if (res.code === 0) {
						this.orderData = res.data;
						debugger
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
						})
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				let that = this;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: that.uploadloadingText
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let json = JSON.parse(result);
					if(json.code === 0){
						this.form.images.push(json.data);
						let item = this.fileList[fileListLen]
						this.fileList.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: json.data
						}))
						fileListLen++
					}
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.baseUrl + '/app/common/upload',
						filePath: url,
						name: 'file',
						header: {
							"tenant-id": config.tenantId //token校验
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						},
						complete: (res)=>{
							let json = JSON.parse(res.data);
							if(json.code != 0){
								this.fileList.splice(this.fileList.length-1, 1)
								this.$refs.uToast.show({
									message: json.msg,
									type: 'error',
								})
							}
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
.evaluate-radio{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 160rpx;
}
.goshop-evaluate-container{
	.goshop-evaluate-wrap{
		.goshop-evaluate-head{
			background-color: $goshop-color-auxiliary-one;
			padding: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.goshop-evaluate-head-left{
				
			}
			.goshop-evaluate-head-right{
				flex: 3;
			    display: flex;
				flex-direction: column;
			}
		}
		.goshop-evaluate-body{
			background-color: $goshop-color-auxiliary-one;
			padding: 20rpx;
			margin-bottom: 20rpx;
		}
		.goshop-evaluate-footer{
			background-color: $goshop-color-auxiliary-one;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
		}
		.goshop-evaluate-submit{
			padding: 20rpx;
		}
	}
}
</style>
